﻿@model Ruitu.Edu.TrainingDemo.ViewModels.BookListViewModel

<div class="books-container">
    <h2>图书列表</h2>
    
    @for (int i = 0; i < Model.Books.Count; i++)
    {
        <div class="book-item">
            @await DisplayAsync(Model.Books[i])
            <div class="book-actions">
                <a href="@Url.Action("BookDetail", "DisplayManagement", new { area = "Ruitu.Edu.TrainingDemo", id = i })" class="detail-link">
                    查看详情
                </a>
            </div>
        </div>
    }
</div>

<style>
    .books-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .book-item {
        margin-bottom: 30px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #f9f9f9;
        position: relative;
    }
    
    .book-item:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        transition: box-shadow 0.3s ease;
    }
    
    h2 {
        text-align: center;
        color: #333;
        margin-bottom: 30px;
    }
    
    .book-actions {
        margin-top: 15px;
        text-align: center;
    }
    
    .detail-link {
        display: inline-block;
        padding: 8px 16px;
        background-color: #007bff;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.3s ease;
        font-size: 14px;
    }
    
    .detail-link:hover {
        background-color: #0056b3;
        color: white;
        text-decoration: none;
    }
</style>